<template>
	<view class="container-main" v-if="details">
		<uv-skeletons :loading="skeletonShow" :skeleton="skeletonStyle">
			<view class="container">
				<tui-navigation-bar splitLine @init="initNavigation" :scrollTop="scrollTop" backgroundColor="#fff" color="#333" :title="pageTitle">
					<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
						<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack('pages/community/index')">
						</view>
					</view>
				</tui-navigation-bar>
				<!-- banner -->
				<view class="swiper-box">
					<uv-swiper class="banner-d" height="873rpx" @videoPlayupdate="videoPlayupdate" :list="details.pengIntroList" keyName="fileUrl"
						:autoplay="false" @click="clickHandler" @change="changeTopSwiper" from="1"></uv-swiper>
					<view class="indicator" v-if="details.pengIntroList && details.pengIntroList.length > 1">
						<view class="dot" :class="{ active: currentSwiperIndex === index }" v-for="(item, index) in details.pengIntroList" :key="index">

						</view>
					</view>
					<!-- <uv-slider v-model="sliderValue"></uv-slider> -->
				</view>
				<!-- 详情说明 -->
				<view class="content-component-box">
					<!-- 陪玩信息 -->
					<view class="content-component-info">
						<view class="user-info-box">
							<view class="user-avatar" @tap="onPreviewImages(0, [details.avatar])">
								<image class="avatar" :src="details.avatar" mode="aspectFill"></image>
							</view>
							<view style="flex: 1">
								<view class="user-info">
									<view class="user-name" :class="{ 'real-auth': details.realAuthState == 1 }">
										<view class="name onelist-hidden">{{ details.nickName }}</view>
									</view>
									<view class="serve" v-if="details.orderCount != 0 && false">已服务 {{ details.orderCount }} 单
									</view>
								</view>
								<view class="basic-information">
									<view class="gender dy-iconfont" :class="details.sex == 'M' ? 'icon-nan' : 'icon-nv'"></view>
									<view class="age-weight">
										<text v-if="details.ageNum && Math.trunc(details.ageNum) > 0 && details.birthViewState == 1"
											style="margin-left: 10rpx; margin-right: 10rpx;">{{ Math.trunc(details.ageNum) }}</text>
										<text
											v-if="details.ageNum && Math.trunc(details.ageNum) > 0 && details.birthViewState == 1 && (details.userHeight && Math.trunc(details.userHeight) > 0 || details.userWeight && Math.trunc(details.userWeight) > 0)">
											| </text>
										<text v-if="details.userHeight && Math.trunc(details.userHeight) > 0" style="margin-left: 10rpx; margin-right: 10rpx;">
											{{ Math.trunc(details.userHeight) }}cm</text>
										<text v-if="details.userWeight && Math.trunc(details.userWeight) > 0"> | </text>
										<text v-if="details.userWeight && Math.trunc(details.userWeight) > 0" style="margin-left: 10rpx; margin-right: 10rpx;">
											{{ Math.trunc(details.userWeight) }}kg</text>
										<text v-if="details.newPengAddressList.length > 0"> | </text>
										<text v-if="details.newPengAddressList.length > 0" style="margin-left: 10rpx;">
											{{ details.newPengAddressList[0].cityName }}</text>
									</view>
								</view>
							</view>
						</view>
						<text class="brief-introduction" v-text="details.pengIntro" user-select style="white-space:pre-wrap;">
						</text>
					</view>
					<view class="content-component-padding">

						<!-- 收费说明 -->
						<view class="content-component">
							<view class="component-title">收费说明</view>
							<view class="goods-spec" v-for="(item, index) in details.pengCategoryList" :key="item.categoryId">
								<view class="content-key">
									<view class="name">{{ item.categoryName }}</view>
									<image v-if="item.authState == 1" class="img"
										src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/major-2.png" mode="">
									</image>
									<uv-icon name="info-circle" color="#BBBCBB" size="30rpx" @click="showTip(item)"></uv-icon>

								</view>
								<view class="content-value ">￥{{ item.pengActualPrice }}/
									{{ item.serviceType == 1 ? '次' : '时' }}
								</view>
							</view>
						</view>
						<!-- 服务地址 -->
						<view class="content-component ">
							<view class="component-title ">服务地址</view>
							<view class="component-content">
								<uv-collapse>
									<uv-collapse-item :title="item.cityName" name="Docs guide" v-for="(item, index) in details.newPengAddressList"
										:key="item.cityName">
										<text class="collapse-content" v-for="(it, ine) in item.childs" :key="it.addressId">{{ it.name }} <text
												v-if="ine != item.childs.length - 1" style="margin: 0 6rpx;">|</text></text>
									</uv-collapse-item>
								</uv-collapse>
							</view>
						</view>
						<!-- 动态评价 -->
						<view class="content-component-state">
							<!-- tab -->
							<view class="state-tab " :class="{ 'state-tab-right': dynamicList.current == 1 }">
								<view class="state-tab-box" v-for="(item, index) in dynamicList.list" :key="item.key"
									:class="{ 'tab-active': item.key == dynamicList.current && item.key == 0, 'tab-active-right': item.key == dynamicList.current && item.key == 1 }"
									@tap.stop.prevent="onStateTab(item)">
									<view class="tab"></view>
									<view class="tab-value">{{ item.value }}</view>
								</view>
							</view>
							<!-- 个人动态 -->
							<view class="dynamic-state" v-if="dynamicList.current == 0">
								<view v-if="details.clientForumList && details.clientForumList.length > 0">
									<view v-for="(itemY, indexY) in details.clientForumList" :key="indexY"
										:class="{ 'dynamic-state-top': itemY.forumYear == '置顶' }">
										<view class="dynamic-state-header" :class="{ 'dynamic-state-header-y': indexY != 0 }">
											<image v-if="itemY.forumYear == '置顶'" class="top"
												src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/top.png" mode="">
											</image>
											<view class="dynamic-time">{{ itemY.forumYear }} <text v-if="indexY != 0">年</text> </view>
											<view class="dynamic-all" v-if="indexY == 0"
												@tap="goPage('/page_community/personnel/personnel?type=' + 1 + '&id=' + userId + '&name=' + details.nickName + '&avatar=' + details.avatar)">
												查看全部</view>
										</view>
										<!-- 个人动态item -->
										<view class="dynamic-state-item" v-for="(item, index) in itemY.forumList" :key="item.id">
											<!-- 时间轴 -->
											<view class="timer-shaft" v-if="itemY.forumYear != '置顶'">
												<view class="timer"></view>
											</view>
											<view class="dynamic-state-content">
												<view class="data" v-if="itemY.forumYear != '置顶'">
													<text>{{ item.createTime | createDate }}</text>
													<text class="create-month">
														{{ item.createTime | createMonth }}月</text>
												</view>
												<view class="content">
													{{item.content}}
													<view class="location" @tap.stop.prevent="openLocation(item)" v-if="item.location">??{{item.location}}
													</view>
												</view>
												<image-arrange v-if="item.pictureList" :imageList="item.pictureList" :isPadLeft="false" :basicsWidth="widthrpx"
													@clickVideo="clickVideo" @previewImg="previewImg" from="index"></image-arrange>
												<view class="operate-fun">
													<view class="">
														<view class="topic onelist-hidden" v-if="item.topicName && from != 'topic'"
															@tap.stop.prevent="openTopic">
															#{{item.topicName}}</view>
													</view>
													<view class="operate" v-if="from != 'details'">
														<!-- <button class="share" type="default"
															open-type="share">分享</button> -->
														<view class="share" @tap.stop.prevent="share(item)">分享</view>
														<view class="appraise-1" @tap.stop.prevent="comment(Object.assign(item,{type: 'post'}))">
															{{item.forumCommentNum || 0}}
														</view>
														<view class="no-zan" v-if="!item.forumLikeState" @tap.stop.prevent="topicUpvote(item)">
															{{item.forumLikeNum | likeNum}}
														</view>
														<view class="zan" v-else @tap.stop.prevent="cancelForumLike(item)">
															{{item.forumLikeNum | likeNum}}
														</view>
													</view>
													<view class="zan-animation" :class="{'vanish-animation':item.vanish_animation}" v-if="item.animation">
														<view class="animation-step-1">
															<image style="width: 100%; height: 100%;"
																src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/zan/zan-header.png">
															</image>
														</view>
														<view class="animation-step-2">
															<image style="width: 100%; height: 100%;"
																src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/zan/zan-bg.png">
															</image>
														</view>
														<view class="animation-step-3">
															<image style="width: 100%; height: 100%;"
																src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/zan/zan-mj.png">
															</image>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view v-else>
									<empty padding="110rpx 100rpx 280rpx"></empty>
								</view>
							</view>

							<view class="appraise " v-if="dynamicList.current == 1">
								<view v-if="details.Personnel && details.Personnel.length > 0">
									<view class="appraise-header">
										<view class="give-mark ">
											<text class="grade">{{ details.recommendNum }}</text>人推荐
										</view>
										<view class="appraise-all"
											@tap="goPage('/page_community/personnel/personnel?type=' + 0 + '&id=' + userId + '&name=' + details.nickName + '&avatar=' + details.avatar)">
											查看全部</view>
									</view>
									<view v-for="(item, index) in details.Personnel" :key="item.id" class="post-item"
										:class="{ 'noBorder': index == details.Personnel.length - 1 }">
										<post-item :size="'90rpx'" :post_type="0" :post="item" :basicsWidth="widthrpxpj"></post-item>
									</view>
								</view>
								<view v-else>
									<empty :image="'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/empty/empty-community.png'"
										padding="110rpx 100rpx 280rpx">暂时没有更多</empty>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="foot-info" :class="{ 'foot-info-shelfState': details.shelfState == 0 }">
					<view class="payment-information" @click="handleSwitchConversation">
						<view class="dy-iconfont icon-a-bianzu17"></view>
						<view class="discounts">联系</view>
					</view>
					<view class="payment-information" @click="lookAuction">
						<view class="dy-iconfont icon-a-bianzu118"></view>
						<view class="discounts">档期</view>
					</view>
					<!-- <button class="payment-information" open-type="share"> -->
					<button class="payment-information" @tap="sharePopupOpen">
						<view class="dy-iconfont icon-a-bianzu119"></view>
						<view class="discounts">分享</view>
					</button>
					<button class="btn-primary btn-submit" @tap.stop.prevent="onSubmit">立即下单</button>
					<!-- @tap.stop.prevent="onSubmit">{{details.shelfState == 0 ? '暂停接单' : details.ownPengState == 1 ? '不可下单' : '元旦后见'}}</button> -->
				</view>
			</view>
		</uv-skeletons>
		<view class="posterContainer max_h" :style="{ top: sharePopupIsShow ? mp.topBarHeight + 'px' : '-110vh' }">
			<l-painter ref="painter1" :css="`width:526rpx; height: ${930 + pengCategoryListSlice.length * 50 + 'rpx'};border-radius: 30rpx;`">
				<!-- <l-painter-image
					src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/share/bg750.png"
					css="width:100%; height: 980rpx;position:absolute;left:0rpx;bottom: 65rpx;"></l-painter-image> -->
				<l-painter-view
					:css="`position:absolute;left:0rpx;top:50rpx; width:523rpx; height: ${880 + pengCategoryListSlice.length * 50 + 'rpx'};background-color: #0B0B0B;border-radius: 30rpx;overflow: hidden;`">

				</l-painter-view>
				<l-painter-view css="position:absolute;left:19rpx;top:19rpx;width:491rpx;height:464rpx;">
					<l-painter-image :src="details.pengIntroList[0].coverPictureUrl || details.pengIntroList[0].fileUrl"
						css="width:491rpx;height:464rpx; object-fit:cover;"></l-painter-image>
				</l-painter-view>
				<l-painter-image src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/share/haibaoborder.png"
					css="width:524rpx;height:526rpx;position:absolute;left:0rpx;top:0rpx;"></l-painter-image>
				<l-painter-view css="position:absolute;left:0rpx;top:526rpx; text-align:center;width:100%;">
					<l-painter-text
						css="font-family: system-ui;font-size: 26rpx;font-weight: bold;font-style: italic;background-clip: text;background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 50%, rgba(255,255,255,0) 100%);"
						text="ADDRESS"></l-painter-text>
				</l-painter-view>
				<l-painter-view css="position:absolute;left:0rpx;top:550rpx; text-align:center;width:100%;">
					<l-painter-text css="font-size: 22rpx;color:#BCD096;font-weight: bold;" text="服务地址"></l-painter-text>
				</l-painter-view>
				<l-painter-view css="position:absolute;left:0rpx;top:610rpx; text-align:center;width:100%;">
					<l-painter-text css="font-size: 18rpx;color:#fff;line-clamp:1; width:80%;" :text="pengAddressListString"></l-painter-text>
				</l-painter-view>
				<l-painter-view css="position:absolute;left:0rpx;top:670rpx; text-align:center;width:100%;">
					<l-painter-text
						css="font-size: 26rpx;font-weight: bold;font-style: italic;background-clip: text;background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 50%, rgba(255,255,255,0) 100%);"
						text="CHARGE"></l-painter-text>
				</l-painter-view>
				<l-painter-view css="position:absolute;left:0rpx;top:694rpx; text-align:center;width:100%;">
					<l-painter-text css="font-size: 22rpx;color:#BCD096;font-weight: bold;" text="收费说明"></l-painter-text>
				</l-painter-view>
				<l-painter-view v-for="(item, index) in pengCategoryListSlice" :key="index"
					:css="`position:absolute;left:0rpx;top:${714 + (index + 1) * 50}rpx; text-align:center;width:100%;display:flex;justify-content:space-between;`">
					<l-painter-view css="padding: 0 0 0 40rpx; display:flex; align-items:center;">
						<l-painter-text css="font-size: 19rpx;color:#fff;" :text="item.categoryName"></l-painter-text>
						<l-painter-image v-if="item.authState == 1"
							src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/major-2.png"
							css="width:70rpx;margin:0 0 0 10rpx;"></l-painter-image>
					</l-painter-view>
					<l-painter-view css="padding: 0 40rpx 0 0;">
						<l-painter-text css="font-size: 19rpx;color:#fff;"
							:text="`￥${item.pengActualPrice}/${item.serviceType == 1 ? '次' : '小时'}`"></l-painter-text>
					</l-painter-view>
				</l-painter-view>
				<l-painter-view v-if="details.pengCategoryList.length > 3"
					:css="`position:absolute;left:0rpx;top:${678 + (4) * 50}rpx; text-align:center;width:100%;`">
					<l-painter-text css="font-size: 28rpx;color:rgba(255,255,255,0.5);font-weight: bold;" text="..."></l-painter-text>
				</l-painter-view>
				<l-painter-view css="position:absolute;left:0rpx;bottom:30rpx;width:100%;display:flex;justify-content:space-between;align-items:center;">
					<l-painter-view css="padding: 0 0rpx 0 40rpx;">
						<l-painter-view css="display:flex;align-items:center;">
							<l-painter-image :src="details.avatar" css="width:30rpx;height:30rpx;border-radius:50%;margin: 0 12rpx 0 0;"></l-painter-image>
							<l-painter-text css="font-size: 22rpx;color:#fff;" :text="details.nickName"></l-painter-text>
						</l-painter-view>
						<l-painter-view>
							<l-painter-text css="font-size: 18rpx;color:rgba(255,255,255,0.5);margin: 15rpx 0rpx 0 0;" text="扫描二维码了解更多"></l-painter-text>
						</l-painter-view>
					</l-painter-view>

					<l-painter-view css="margin: 0 40rpx 0 0; padding:10rpx; background-color:#fff;border-radius:50%;text-align:center; overflow: hidden;">
						<l-painter-image :src="programCode" css="width:80rpx;height:80rpx;"></l-painter-image>
					</l-painter-view>
				</l-painter-view>
			</l-painter>
		</view>
		<!-- 分享弹出 -->
		<uv-popup ref="sharePopup" mode="bottom" bgColor="#fff" round="30" @change="sharePopupChange">
			<view class="">
				<view class="shareContainer">
					<view class="title">
						<text class="txt">分享</text>
						<image class="close" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/share/closeicon30.png" mode="widthFix"
							@tap="closeSharePopup" />
					</view>
					<view class="iconBox">
						<view class="item" @tap="shareTap">
							<image class="icon" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/share/wxs100.png" mode="">
							</image>
							<view class="txt">发给好友</view>
						</view>
						<view class="item" @tap="collectTap">
							<image class="icon" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/share/collects100.png" mode="">
							</image>
							<view class="txt">收藏</view>
						</view>
						<view class="item" @tap="saveCollects">
							<image class="icon" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/share/saves100.png" mode="">
							</image>

							<view class="txt">保存到相册</view>
						</view>
					</view>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="popup" mode="center" bgColor="none" overlayOpacity="1">
			<view class="swiper-box-pop">
				<uv-swiper class="banner-d" :pop="true" :current="s_current" bgColor="none" imgMode="widthFix" height="100vh" @videoPlayupdate="videoPlayupdate"
					:list="details.pengIntroList" keyName="fileUrl" :autoplay="false" @change="changeSwiper" @videoPlayOverlay="videoPlayOverlay"
					@closePop="closePop" @click="clickHandlersw"></uv-swiper>
			</view>
		</uv-popup>
		<view class="guidance-pop" @touchmove.stop.prevent="clear" v-if="guidance.status">
			<view class="overlay" :class="{'overlay-none':guidance.step != 1}" @touchmove.stop.prevent="clear"></view>
			<view class="guidance-step-2">
				<view class="remind" @tap.stop.prevent="nextStep(guidance.step)">我知道啦</view>
				<view class="Guidance">建议您下单前可以和碰头人先沟通需求哦～</view>
			</view>
		</view>
		<uv-toast ref="toast"></uv-toast>
		<view class="myTip" :class="{ myTipHidden: !myTipIsShow }" @tap="closeMyTip">
			<view class="container">
				<view class="top">
					<image class="close" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/share/closeicon30.png" mode="widthFix"
						@tap="closeMyTip" />
				</view>
				<view class="title">类目说明</view>
				<view class="content">{{ tipContent }}</view>
			</view>
		</view>
		<!-- 评论列表 -->
		<uv-popup ref="commentpopup" bgColor="none" mode="bottom" zIndex="2580" :overlayOpacity="0.4">
			<view class="popup-comment">
				<view class="header">
					<view class="title">评论({{replyNum}}条)</view>
					<view class="close" @tap="closePopComment"><text class="dy-iconfont icon-a-bianzu69"></text>
					</view>
				</view>
				<!-- -- 评论列表 -- -->
				<comment ref="comment" :list="commentList.list" @onInfo="onInfo" scroll :commentInfo="commentInfo" @scrolltolower="commentScrolltolower"
					:commentLoad="commentLoad" @getMore="getMore" @longpressHandler="longpressHandler" @removeResolve="removeResolve"></comment>
				<view class="foot">
					<view class="foot-box">
						<view class="foot-input">
							<text @tap.stop.prevent="tapInput" class="input-text">{{inputText || '说点什么…'}}</text>
							<text @tap.stop.prevent="tapEmoji" class="dy-iconfont icon-xingzhuangjiehebeifen"></text>
						</view>
					</view>
				</view>
			</view>
		</uv-popup>
		<uv-popup :safeAreaInsetBottom="false" ref="popupmenu" mode="bottom" round="20" zIndex="2582">
			<view class="delete-pop-menu">
				<view class="menu-list" :class="{'delete':item.lable == 'delete'}" v-for="(item,index) in commentMenuList" :key="item.lable"
					@tap.stop.prevent="selectCommentMenu(item)">
					<view>{{item.name}}</view>
				</view>
			</view>
		</uv-popup>
		<comment-foot ref="commentFoot" :list="commentList.list" @onReply="onReply" @changinput="changinput" @footInputClose="footInputClose"
			:placeholder="placeholder"></comment-foot>
		<survey-pop></survey-pop>
		<movable-box :userId="details.nextPengUser.nextUserId" :from="from" :categoryId="categoryId" :countyName="countyName"></movable-box>
		<l-painter ref="painter" hidden />

		<uv-popup ref="wxPopup" bgColor="none" z-index="2147483646">
			<reminder title='微信号' :value="details.wechatNumber" image="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/order-header-3.png"
				@closePop="closeWxPopup" close>
				<view class="signPop">
					<button class="btn-primary btn-default" @tap.stop.prevent="copyWx">复制</button>
				</view>
			</reminder>
		</uv-popup>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import skeleton from "@/utils/skeletonStyle.js";
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	import movableBox from './movable-area-block/movable-area-block.vue';
	import {
		GetPenProgramCode,
	} from "@/utils/requset/api.js";
	import dayjs from 'dayjs';
	const app = getApp();
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {
			movableBox
		},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5,
				navBarTop: 0,
				pageTitle: '',
				pengIntro: '',
				skeletonShow: true,
				dynamicList: {
					list: [{
						value: '个人动态',
						key: 0,
					}, {
						value: '评分评价',
						key: 1,
					}],
					current: 0,
				},
				details: null,
				userId: null,
				sliderValue: 0,
				isVideo: false,
				skeletonStyle: skeleton.details,
				Personnel: null,
				s_current: 0,
				sharePopupIsShow: false, //记录是否显示弹出的变量
				programCode: "", // 个人码
				heightMode: app.globalData.heightMode, // 海报的高度模式
				heightValue: app.globalData.heightValue, // 设备高度值,
				currentSwiperIndex: 0, // 轮播的索引
				myTipIsShow: false, // 是否显示提示
				tipContent: "", //提示的文字
				from: 0,
				guidance: {
					status: false,
					step: 2,
				},
				widthrpx: 0,
				widthrpxpj: 0,
				dynamicWidthrpx: 0,
				rpx: app.globalData.widthPx / 750,
				basicsWidthPx: '',

				commentList: {
					list: [],
					hasMore: false,
					loading: false,
					page: 1,
				},
				inputText: '',
				placeholder: '说点什么...',
				commentLoad: {
					loading: false,
					status: 'loading',
					loadingText: '努力加载中',
					nomoreText: '没有更多了'
				},
				replyNum: 0,
				shareItem: null,
				commentInfo: null,
				replyinfo: null,
				replyIndex: 0,
				commentMenuList: [{
					name: '复制评论',
					lable: 'copy'
				}],
				longpressInfo: null,
				categoryId: '',
				countyName: '',
			};
		},
		/**
		 * 计算属性
		 */
		computed: {
			pengCategoryListSlice() {
				if (!this.details || !this.details.pengCategoryList || !this.details.pengCategoryList.length) {
					return []
				}
				if (this.details.pengCategoryList.length > 3) {
					return this.details.pengCategoryList.slice(0, 3)
				} else {
					return this.details.pengCategoryList
				}
				// if (this.heightMode == "small") {
				// 	if (this.details.pengCategoryList.length > 1) {
				// 		return this.details.pengCategoryList.slice(0, 1)
				// 	} else {
				// 		return this.details.pengCategoryList
				// 	}
				// } else {
				// 	if (this.details.pengCategoryList.length > 3) {
				// 		return this.details.pengCategoryList.slice(0, 3)
				// 	} else {
				// 		return this.details.pengCategoryList
				// 	}
				// }
			},
			pengAddressListString() {
				if (!this.details) {
					return ""
				}
				if (!this.details.pengAddressList || !this.details.pengAddressList.length) {
					return ""
				}
				if (this.details.pengAddressList.length > 3) {
					let arr = this.details.pengAddressList.slice(0, 3);
					return arr.reduce((acc, item, index) => {
						if (index === arr.length - 1) {
							return acc + item.cityName + '·' + item.name + "..."
						} else {
							return acc + item.cityName + '·' + item.name + ' | '
						}
					}, '')
				} else {
					return this.details.pengAddressList.reduce((acc, item, index) => {
						if (index === this.details.pengAddressList.length - 1) {
							return acc + item.cityName + '·' + item.name
						} else {
							return acc + item.cityName + '·' + item.name + ' | '
						}
					}, '')
				}


			}
		},
		filters: {
			createDate(value) {
				return dayjs(value).date()
			},
			createMonth(value) {
				return dayjs(value).month() + 1
			},
			likeNum(value) {
				if (value > 10000) {
					return (value / 10000).toFixed(2);
				} else {
					return value
				}
			}
		},
		onLoad(options) {
			this.userId = options.id
			this.from = options.from
			this.categoryId = options.categoryId || ''
			this.countyName = options.area || ''
			this.getPageData()
			this.getUserProgramCode()
		},
		onShow: function() {
			this.widthrpx = app.globalData.systemInfo.windowWidth / this.rpx - 24 * 4 - 36
			this.widthrpxpj = app.globalData.systemInfo.windowWidth / this.rpx - 24 * 4 - 90 - 16
			this.dynamicWidthrpx = app.globalData.systemInfo.windowWidth / this.rpx - 24 * 4 - 36 - 2
			this.basicsWidthPx = ['web', 'h5'].includes(app.globalData.systemInfo.uniPlatform) ? -(this.widthrpx * this
				.rpx) + 'px' : (-this.widthrpx) + 'rpx'
		},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		onShareAppMessage: function() {
			const that = this;
			//转发参数
			return {
				// 转发的标题
				title: 'PENG一下，趣收获',
				desc: 'PENG一下，趣收获',
				// 转发的路径，默认是当前页面，必须是以‘/’开头的完整路径，/pages/index/index
				path: '/page_sharing/accompany/details?id=' + that.userId,
				//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，
				//支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				// imageUrl: that.details.pengIntroList[0].coverPictureUrl || that.details.pengIntroList[0].fileUrl
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			//转发参数
			return {
				// 转发的标题
				title: 'PENG一下，趣收获',
				desc: 'PENG一下，趣收获',
				// 转发的路径，默认是当前页面，必须是以‘/’开头的完整路径，/pages/index/index
				path: '/page_sharing/accompany/details?id=' + that.userId,
				//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，
				//支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				// imageUrl: that.details.pengIntroList[0].coverPictureUrl || that.details.pengIntroList[0].fileUrl
			}
		},


		methods: {
			clear() {},
			nextStep(step) {
				uni.setStorageSync('details_guidance', true);
				this.guidance.status = false
			},
			closeMyTip() {
				this.myTipIsShow = false;
			},
			showTip(data) {
				// console.log(data);
				this.tipContent = data.serviceDescription;
				this.myTipIsShow = true;
			},
			goLogin() {
				app.doLogin()
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			videoPlayOverlay(swiper) {
				this.closePop()
			},
			//播放进度
			videoPlayupdate(e) {},
			//点击swiper
			clickHandler(item) {
				let urls = []
				this.details.pengIntroList.forEach(li => {
					urls.push(li.fileUrl)
				})
				// uni.previewImage({
				// 	current: item.index,
				// 	urls: urls
				// });
				this.s_current = item.index
				this.$refs.popup.open();
			},
			closePop() {
				this.$refs.popup.close();
			},
			clickHandlersw(swiper) {
				console.log(swiper);
				if (swiper.item.fileType == 1) {
					this.closePop()
				}
			},
			// 非弹出swiper
			changeTopSwiper(e) {
				this.currentSwiperIndex = e.current;
			},
			// 弹出的swiper
			changeSwiper(e) {
				// console.log(e);
			},
			// 返回上一页
			goBack: function(url) {
				let navUrl = url
				if (this.from == 1) {
					navUrl = false
				}
				if (navUrl) {
					app.navigationTo(navUrl);
				} else {
					app.beNavigateBack();
				}
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 加载页面数据
			getPageData: function(callback) {
				Promise.all([this.getUserDetails(), this.getPersonnel()]).then(() => {
					this.skeletonShow = false;
					uni.stopPullDownRefresh();
					this.$set(this.details, 'Personnel', this.Personnel)
					// this.$refs.popup.open();
				});
			},
			//获取用户个人程序码
			getUserProgramCode() {
				let routes = getCurrentPages();
				let route = routes[routes.length - 1];
				GetPenProgramCode({
					data: {
						userId: this.userId,
						path: route.$page.fullPath,
						envVersion: "release",
					},
				}).then((res) => {
					if (res.code === 0 || res.code === 200) {
						this.programCode = res.data.url;
					}
				});
			},
			//获取用户详情
			getUserDetails() {
				return new Promise((resolve, reject) => {
					app._get(
						"/client/index/peng-user/detail", {
							userId: this.userId,
							categoryId: this.categoryId,
							countyName: this.countyName
						},
						(result) => {
							let details = result.data
							if (details.pinnedForum) {
								let pinnedForum = {
									forumList: [details.pinnedForum],
									forumYear: '置顶'
								}
								this.$set(details, 'clientForumList', [pinnedForum, ...details
									.clientForumList
								])
							}
							details.clientForumList.forEach(li => {
								li.forumList.forEach(item => {
									item.animation = false
									item.vanish_animation = false
									item.isZan = false
								})
							})
							// console.log(details.clientForumList);
							this.details = details
							this.pengIntro = this.escape2Html(this.details.pengIntro);
							this.pageTitle = result.data.nickName
							let arr = []
							result.data.pengAddressList.forEach(item => {
								const parent = arr.find(cur => cur.cityName === item.cityName)
								if (parent) {
									parent.childs.push(item)
								} else {
									const obj = {
										cityName: item.cityName,
										childs: [item]
									}
									arr.push(obj)
								}
							})
							this.$set(this.details, 'newPengAddressList', arr)
							if (app.globalData.isLogin) {
								let guidance = uni.getStorageSync('details_guidance');
								this.guidance.status = !guidance
							}
						}, null, () => {
							resolve();
						}
					);
				});
			},
			getPersonnel() {
				return new Promise((resolve, reject) => {
					app._post_form(
						"/client/forum/personnel-page", {
							current: 3,
							extra: {},
							model: {
								forumType: 0,
								userId: this.userId
							},
							order: "descending",
							size: 10,
							sort: "createTime"
						},
						(result) => {
							this.Personnel = result.data.records
						}, null, () => {
							resolve();
						}
					);
				});
			},
			onCheckLogin() {
				// console.log(app.globalData.isLogin);
				if (!app.globalData.isLogin) {
					uni.setStorageSync('currentPage', 'page_sharing/accompany/details?id=' + this.userId);
					app.doLogin();
					return false;
				}
				return true;
			},
			handleSwitchConversation() {
				if (!this.onCheckLogin()) {
					return;
				}
				// details.shelfState == 1 && details.imState == 1
				if (!this.details.wechatNumber) {
					this.$refs.toast.show({
						type: 'default',
						message: "对方暂未填写联系方式哦，您可以在对方的动态中评论，向对方索取联系方式～"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 2500)
					return
				}
				this.$refs.wxPopup.open();
				// uni.navigateTo({
				// 	url: "/page_chat/chat/chat?conversationID=C2C" + this.userId
				// })
			},
			closeWxPopup() {
				this.$refs.wxPopup.close();
			},
			copyWx() {
				let that = this
				uni.setClipboardData({
					data: that.details.wechatNumber,
					success: function() {
						uni.showToast({
							title: '已复制',
							icon: 'success',
							duration: 2000
						});
						that.closeWxPopup()
					},
					fail: function(err) {
						console.log(err);
					},
				});
			},
			onPreviewImages(current, urls) {
				uni.previewImage({
					current: current,
					urls: urls
				});
			},
			lookAuction() {
				app.navigationTo('page_user/auction/auction?id=look&userId=' + this.userId + '&title=查看档期')
			},
			onSubmit() {
				if (!this.onCheckLogin()) {
					return false;
				}
				// {{details.shelfState == 0 ? '暂停接单' : details.ownPengState == 1 ? '不可下单' : '立即下单'}}
				if (this.details.shelfState == 0) {
					this.$refs.toast.show({
						type: 'default',
						message: "该碰头人已暂停接单哦～"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				if (this.details.ownPengState == 1) {
					this.$refs.toast.show({
						type: 'default',
						message: "不可对自己下单哦～"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				app.navigationTo('page_sharing/check/check?id=' + this.userId)
			},
			onStateTab(item) {
				if (this.dynamicList.current != item.key) {
					this.dynamicList.current = item.key
				}
			},
			// 保存相册
			saveCollects() {
				this.$refs.painter1.canvasToTempFilePathSync({
					fileType: "png",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						wx.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res) => {
								this.$refs.toast.show({
									type: 'success',
									message: "保存图片成功"
								});
								this.sharePopupChange(false);
								this.closeSharePopup();
								setTimeout(() => {
									this.$refs.toast.hide();
								}, 1000)
							},
							fail: (err) => {
								// this.$refs.toast.show({
								// 	type: 'error',
								// 	message: err.errMsg,
								// });
								// setTimeout(() => {
								// 	this.$refs.toast.hide();
								// }, 1000)
							}
						});
					},
					fail: () => {

					}
				})
			},
			// 发给好友
			shareTap() {
				this.$refs.painter1.canvasToTempFilePathSync({
					fileType: "jpg",
					pathType: 'url',
					quality: 1,
					success: (res) => {
						wx.showShareImageMenu({
							path: res.tempFilePath,
							success: () => {
								this.$refs.toast.show({
									type: 'success',
									message: "发送成功",
								});
								this.sharePopupChange(false);
								this.closeSharePopup();
								setTimeout(() => {
									this.$refs.toast.hide();
								}, 1000)
							}
						})
					},
					error: (err) => {
						// this.$refs.toast.show({
						// 	type: 'error',
						// 	title: err.errMsg,
						// 	message: err.errMsg,
						// });
						// setTimeout(() => {
						// 	this.$refs.toast.hide();
						// }, 1000)
					}
				});
			},
			// 收藏到微信
			collectTap() {
				this.$refs.painter1.canvasToTempFilePathSync({
					fileType: "png",
					pathType: 'url',
					quality: 1,
					success: (res) => {
						wx.showShareImageMenu({
							path: res.tempFilePath,
							success: () => {
								this.$refs.toast.show({
									type: 'success',
									message: "收藏成功",
								});
								this.sharePopupChange(false);
								this.closeSharePopup();
								setTimeout(() => {
									this.$refs.toast.hide();
								}, 1000)
							}
						})
					},
					error: (err) => {
						// this.$refs.toast.show({
						// 	type: 'error',
						// 	title: err.errMsg,
						// 	message: err.errMsg,
						// });
						// setTimeout(() => {
						// 	this.$refs.toast.hide();
						// }, 1000)
					}
				});
			},
			// 弹出的change函数
			sharePopupChange(params) {
				this.sharePopupIsShow = params.show;
			},
			// 关闭分享
			closeSharePopup() {
				this.$refs.sharePopup.close();
			},
			// 分享弹出
			sharePopupOpen() {
				this.$refs.sharePopup.open();
			},
			//  ------------------------------------------------------------

			cancelForumLike(post) {
				if (!app.globalData.isLogin) {
					post.forumLikeState = 0
					post.forumLikeNum = post.forumLikeNum - 1
					return
				}
				return new Promise((resolve, reject) => {
					app._post_form('/client/forum-topic/give-like', {
						giveId: post.id,
						giveType: 0
					}, (result) => {
						post.forumLikeState = 0
						post.forumLikeNum = post.forumLikeNum - 1
						resolve()
					}, null, (err) => {})
				})
			},
			topicUpvote(post) {
				this.upvote(post)
				return new Promise((resolve, reject) => {
					app._post_form('/client/forum-topic/give-like', {
						giveId: post.id,
						giveType: 0
					}, (result) => {
						// this.upvote(post)
						resolve()
					}, () => {
						post.forumLikeState = 0
						post.forumLikeNum = post.forumLikeNum - 1
					}, (err) => {})
				})
			},
			onUpvote(post) {
				post.animation = true
				post.forumLikeState = 1
				post.forumLikeNum += 1
				setTimeout(() => {
					post.vanish_animation = true
				}, 1000)
				setTimeout(() => {
					post.animation = false
					post.vanish_animation = false
				}, 1300)
			},
			upvote(post) {
				throttle(this.onUpvote(post), 1300, true)
			},
			//  ------------------------------------------------------------
			previewImg(e) {
				return new Promise((resolve, reject) => {
					app._post_form("/client/forum-topic/submit-forum-view", {
							"list": [{
								"forumId": e.id,
								"topicId": e.topicId
							}]
						},
						(result) => {
							resolve();
						}, null, () => {
							reject();
						}
					);
				});
			},
			// 分享开始 ----------------------------------
			getShareCode(id) {
				return new Promise((resolve, reject) => {
					app._post_form(
						"/client/qr/create-wx-code", {
							envVersion: 'release',
							forumId: id,
							path: "page_community/details/details?id=" + id + '&from=share',
						},
						(result) => {
							let res = result.data
							resolve(res);
						}, null, () => {
							resolve(false);
						}
					);
				});
			},

			async share(e) {
				let that = this
				that.$refs.toast.show({
					type: 'loading',
				})
				console.log(e);
				const shareCode = await that.getShareCode(e.id)
				that.mp.poster.views[1].views[0].src = this.details.avatar
				that.mp.poster.views[1].views[1].text = this.details.nickName
				that.mp.poster.views[1].views[3].text = this.details.pengAddressList[0].cityName
				that.mp.poster.views[2].views[0].text = e.content
				that.mp.poster.views[3].views[0].src = shareCode.url

				if (!e.pictureList) {
					that.mp.poster.css.height = "462rpx"
					that.mp.poster.css.padding = "56rpx 47rpx 16rpx 38rpx"
					that.mp.poster.css.backgroundImage =
						'url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/poser-bg-w2.png")'
					that.mp.poster.views[0].css.width = "0"
					that.mp.poster.views[0].css.height = "0"
					that.mp.poster.views[0].css.marginBottom = "0"
					that.mp.poster.views[1].css.marginBottom = "50rpx"
				} else {
					that.mp.poster.css.height = "1039rpx"
					that.mp.poster.css.padding = "64rpx 38rpx 16rpx 38rpx"
					that.mp.poster.css.backgroundImage =
						'url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/poser-bg-h2.png")'
					that.mp.poster.views[0].css.width = "576rpx"
					that.mp.poster.views[0].css.height = "576rpx"
					that.mp.poster.views[0].css.marginBottom = "46rpx"
					that.mp.poster.views[0].src = e.pictureList[0].coverPictureUrl ? e.pictureList[0]
						.coverPictureUrl : e.pictureList[0].fileUrl
				}
				// 渲染
				that.$refs.painter.render(that.mp.poster);
				// 生成图片
				that.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						that.$refs.toast.hide()
						wx.showShareImageMenu({
							path: res.tempFilePath,
							success: () => {},
						})
					},
					fail: () => {
						that.$refs.toast.hide()
					}
				});
			},
			// 分享结束 ----------------------------------
			clickHead(e) {
				app.navigationTo('page_sharing/accompany/details?id=' + e.userId + '&from=1')
			},
			clickVideo(item) {},
			// 评价开始 ------------------------------------------------------------

			// 长按
			longpressHandler(e) {
				this.longpressInfo = e
				if (e.delete_status) {
					this.$set(this.commentMenuList, 1, {
						name: '删除',
						lable: 'delete'
					})
				} else {
					this.commentMenuList.splice(1, 1)
				}
				this.$refs.popupmenu.open();
			},
			selectCommentMenu(item) {
				let that = this
				if (item.lable == 'copy') {
					uni.setClipboardData({
						data: that.longpressInfo.item.comment,
						showToast: false,
						success: function() {
							that.$refs.popupmenu.close();
							that.$refs.toast.show({
								type: 'default',
								message: "复制成功"
							})
							setTimeout(() => {
								that.$refs.toast.hide()
							}, 1000)
						}
					});
				} else if (item.lable == 'delete') {
					that.$refs.popupmenu.close();
					that.$refs.comment.deleteComment()
				}
			},
			removeResolve() {
				let that = this
				that.$refs.toast.show({
					type: 'default',
					message: "删除成功"
				})
				setTimeout(() => {
					that.$refs.toast.hide()
				}, 1000)
			},
			// 长按结束 --------

			commentScrolltolower() {
				if (this.commentList.hasMore && !this.commentList.loading) {
					this.commentLoad.loading = true
					this.getCommentList()
				}
			},
			// 子评论列表查询
			getMore(e) {
				this.$set(this.commentList.list[e.index], 'clientForumCommentPage', e)
			},

			// 评论列表查询
			getCommentList(id) {
				return new Promise((resolve, reject) => {
					this.commentList.loading = false
					app._post_form("/client/forum-comment/query-page", {
							current: this.commentList.page,
							extra: {},
							model: {
								forumId: this.commentInfo.id,
							},
							order: "descending",
							size: 10,
							sort: "createTime"
						},
						(result) => {
							let {
								records,
								total
							} = result.data;
							let {
								page,
								list,
								hasMore
							} = this.commentList;
							if (1 == page) {
								list.length = 0;
							}
							records.forEach((item, index) => {
								item.clientForumCommentPage = {
									list: item.clientForumCommentPageVO ? [item
										.clientForumCommentPageVO
									] : [],
									hasMore: item.commentNum > 1 ? true : false,
									loading: false,
									page: 1,
									index: 0
								}
							})

							list = [...list, ...records];
							hasMore = total > list.length;
							if (hasMore) {
								page++;
								this.commentLoad.loading = false
							} else if (list.length > 3) {
								this.commentLoad.loading = true
								this.commentLoad.status = 'nomore'
							} else {
								this.commentLoad.status = 'nomore'
							}
							this.commentList.hasMore = hasMore;
							this.commentList.list = list;
							this.commentList.page = page;
							resolve();
						}, null, () => {
							reject();
						}
					);
				});
			},

			// 评价列表&&弹窗
			comment(e) {
				let that = this
				that.$refs.toast.show({
					type: 'loading',
				})
				that.commentList = {
					list: [],
					hasMore: false,
					loading: false,
					page: 1,
				}
				that.replyNum = e.forumCommentNum
				that.commentInfo = e
				that.getCommentList(e.id).then(() => {
					that.$refs.toast.hide()
					that.$refs.commentpopup.open();
					that.placeholder = '说点什么...'
				}).catch(() => {
					that.$refs.toast.hide()
				})
			},
			// 关闭评价列表弹窗
			closePopComment() {
				this.$refs.commentpopup.close();
			},
			// 点表情
			tapEmoji() {
				this.replyinfo = this.commentInfo
				this.$refs.commentFoot.tapEmoji();
			},
			// 点输入框block
			tapInput() {
				this.replyinfo = this.commentInfo
				this.$refs.commentFoot.tapInput();
			},
			// 点用户回复
			onInfo(e) {
				if (e.index) {
					this.replyIndex = e.index
				}
				this.replyinfo = e.item
				this.placeholder = '回复@' + e.item.userName
				this.$refs.commentFoot.tapInput();
			},
			// 用户输入
			changinput(e) {
				this.inputText = e
			},
			// 输入框弹窗关闭
			footInputClose() {
				if (!this.inputText) {
					setTimeout(() => {
						this.placeholder = '说点什么...'
					}, 200)
				}
			},
			// 回复内容校验
			validMessages(str) {
				var re = /\S/
				return re.test(str)
			},
			// 回复
			onReply(e) {
				let that = this
				if (!that.validMessages(that.inputText)) {
					that.$refs.toast.show({
						type: 'default',
						message: "请输入回复内容"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!e) {
					that.$refs.toast.show({
						type: 'default',
						message: "输入文字不合法"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				console.log(that.replyinfo);
				throttle(app._post_form('/client/forum-topic/submit-comment', {
					comment: that.inputText,
					commentType: that.replyinfo.type == 'comment' ? 0 : 1,
					forumId: that.replyinfo.type == 'comment' ? that.replyinfo.forumId : that.replyinfo.id,
					commentId: that.replyinfo.type == 'comment' ? that.replyinfo.commentId : null,
				}, (result) => {
					let data = Object.assign(result.data, {
						clientForumCommentPage: {
							list: [],
							hasMore: true,
							loading: false,
							page: 1,
							index: 0
						}
					})
					that.inputText = ''
					that.$refs.commentFoot.changinputSec()
					uni.hideKeyboard();
					that.$refs.toast.show({
						type: 'default',
						message: "评论成功"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					if (that.replyinfo.type == 'post') {
						data.commentNum = 0
						that.replyNum = Number(that.replyNum) + 1
						that.$refs.comment.goTop()
						that.commentList.list.unshift(data)
					} else {
						that.replyNum = Number(that.replyNum) + 1
						that.$refs.comment.onReplyChild(data)
					}
				}, null, (err) => {
					that.inputText = ''
					that.$refs.commentFoot.changinputSec()
				}), 1000, true)
			},
			// 评价结束 ------------------------------------------------------------
			openLocation(item) {
				wx.openLocation({
					latitude: Number(item.locationLongitude),
					longitude: Number(item.locationLatitude),
					scale: 18,
					name: item.location
				})
			},
		},
	};
</script>
<style lang="scss" scoped>
	.myTipHidden {
		opacity: 0 !important;
		visibility: hidden;
	}

	.myTip {
		opacity: 1;
		transition: all .3s;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		z-index: 1000;

		.container {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-radius: 82rpx;
			background-color: #fff;
			box-sizing: border-box;
			width: 644rpx;
			// height: 157rpx;
			padding: 40rpx 60rpx 80rpx 60rpx;

			text-align: center;

			.top {
				text-align: right;
				font-size: 0;

				.close {
					width: 26rpx;
					// border: 1px solid red;
					// height: 22rpx;
				}
			}

			.title {
				font-size: 33rpx;
				font-weight: 900;
				color: #282D2D;
				margin-bottom: 40rpx;
			}

			.content {
				text-align: left;
				font-size: 26rpx;
			}
		}

	}

	.container-main {
		background: #F6F8F7;
		min-height: 100vh;
	}

	.container {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.swiper-box {
			position: relative;
			width: 100%;

			// 指示器
			.indicator {
				position: absolute;
				left: 50%;
				bottom: 60rpx;
				transform: translate(-50%, 0);
				display: flex;
				justify-content: space-between;

				.dot:not(:last-of-type) {
					margin-right: 20rpx;
				}

				.active {
					width: 46rpx !important;
					border-radius: 7rpx !important;
				}

				.dot {
					transition: all .3s;
					flex-shrink: 0;
					width: 14rpx;
					height: 14rpx;
					border-radius: 50%;
					background-color: rgba(226, 233, 228, 0.64);
				}
			}
		}

		.banner-d {
			height: 873rpx;
		}

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				background: rgba(255, 255, 255, 0.6);
				border-radius: 50%;
				padding: 10rpx;
			}
		}

		.content-component-box {
			margin-top: -30rpx;
			position: relative;
			z-index: 9;

			.content-component-info {
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 36rpx 36rpx 26rpx;
				border-radius: 32rpx 32rpx 0px 0px;

				.user-info-box {
					display: flex;
					margin-bottom: 31rpx;

					.user-avatar {
						width: 102rpx;
						height: 102rpx;
						margin-right: 11rpx;
						flex-shrink: 0;

						.avatar {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}

				.user-info {
					display: flex;
					width: 100%;
					justify-content: center;
					justify-content: space-between;
					margin-bottom: 7rpx;
					width: 100%;
					margin-bottom: 25rpx;

					.user-name {
						font-size: 32rpx;
						color: #1E1F1F;
						line-height: 45rpx;
						font-weight: 900;
						position: relative;
						max-width: 40%;

						&.real-auth {
							&::after {
								position: absolute;
								display: block;
								right: -162rpx;
								top: 0;
								content: '';
								width: 150rpx;
								height: 40rpx;
								background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/autonym-2.png');
								background-repeat: no-repeat;
								background-size: cover;
								z-index: 10;
							}
						}
					}

					.serve {
						flex-shrink: 0;
						font-size: 26rpx;
						font-weight: 400;
						color: #BDB8B8;
						line-height: 45rpx;
					}
				}

				.basic-information {
					display: flex;
					align-items: center;

					.gender {
						width: 40rpx;
						height: 40rpx;
						font-size: 38rpx;
						// background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/woman.png');
						// background-repeat: no-repeat;
						// background-size: cover;

						// &.gender-nan {
						// 	background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/man.png');
						// 	background-repeat: no-repeat;
						// 	background-size: cover;
						// }
					}

					.age-weight {
						font-size: 26rpx;
						font-weight: 400;
						color: #BDB8B8;
						line-height: 30rpx;
						margin-bottom: -4rpx;
					}
				}

				.brief-introduction {
					font-size: 30rpx;
					font-weight: 500;
					color: #282D2D;
					line-height: 50rpx;
				}
			}

			.content-component-padding {
				box-sizing: border-box;
				padding: 24rpx 24rpx 0;

				.content-component {
					box-sizing: border-box;
					padding: 24rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					margin-bottom: 24rpx;

					.component-title {
						font-size: 32rpx;
						font-weight: 900;
						color: #1E1F1F;
						line-height: 44rpx;
						margin-bottom: 36rpx;
					}

					.component-content {
						font-size: 26rpx;
						font-weight: 400;
						color: #999B9B;
						line-height: 56rpx;
						// collapse-content
					}

					.goods-spec {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 32rpx;

						.name {
							// display: inline-block;
							margin-right: 8rpx;
						}

						&:last-child {
							margin-bottom: 0;
						}

						.content-key {
							display: flex;
							align-items: center;
							font-size: 30rpx;
							font-weight: 500;
							color: #282D2D;
							line-height: 44rpx;

							.img {
								width: 103rpx;
								height: 36rpx;
								margin-right: 8rpx;
							}

							// &.goods-label {
							// 	position: relative;

							// 	&::after {
							// 		content: "";
							// 		display: block;
							// 		box-sizing: border-box;
							// 		width: 103rpx;
							// 		height: 36rpx;
							// 		background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/major-2.png');
							// 		background-size: 100% 100%;
							// 		position: absolute;
							// 		right: calc(-12rpx - 103rpx);
							// 		top: 50%;
							// 		margin-top: -18rpx;
							// 	}
							// }
						}

						.content-value {
							font-size: 30rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 44rpx;
						}
					}
				}

				.content-component-state {
					width: 100%;
					margin-top: 24rpx;
					// background: #FFFFFF;

					.state-tab {
						width: 100%;
						// display: flex;
						height: 106rpx;
						position: relative;

						.tab-value {
							position: absolute;
							font-size: 30rpx;
							font-weight: 900;
							color: #909693;
							line-height: 44rpx;
							left: 50%;
							top: 56%;
							transform: translate(-50%, -50%);
							z-index: 3;
						}

						.state-tab-box {
							width: 50%;
							display: flex;
							align-items: flex-end;
							justify-content: center;
							border-radius: 12rpx;
							position: relative;

							&:first-child {
								position: absolute;
								left: 0;
								bottom: 0;
							}

							&:last-child {
								position: absolute;
								right: 0;
								bottom: 0;
							}

							&.tab-active {
								width: 388rpx;
								height: 106rpx;
								z-index: 2;
								bottom: -2rpx;

								.tab {
									width: 388rpx;
									background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/details-tab.png');
									background-size: 100% 100%;
									height: 106rpx;
									border-radius: 0rpx;
								}

								.tab-value {
									color: #1E1F1F;
								}
							}

							&.tab-active-right {
								width: 388rpx;
								height: 106rpx;
								z-index: 2;
								bottom: -2rpx;

								.tab {
									width: 388rpx;
									background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/details-tab-right.png');
									background-size: 100% 100%;
									height: 106rpx;
									border-radius: 0rpx;
								}

								.tab-value {
									color: #1E1F1F;
								}
							}
						}

						.tab {
							display: flex;
							position: relative;
							width: 100%;
							height: 94rpx;
							background: linear-gradient(90deg, #D8E9DE 0%, #FBFEF3 20%, #DCF2EB 100%);
							font-size: 30rpx;
							font-weight: 900;
							color: #909693;
							line-height: 44rpx;
							align-items: center;
							justify-content: center;
							border-radius: 12rpx;
						}

						&.state-tab-right {
							.tab {
								background: linear-gradient(270deg, #D8E9DE 0%, #FBFEF3 20%, #DCF2EB 100%);
							}
						}
					}

					.dynamic-state {
						background: #FFFFFF;
						box-sizing: border-box;
						padding: 36rpx 24rpx 160rpx 24rpx;

						.dynamic-state-top {
							.dynamic-state-content {
								border-left: none !important;
								padding-bottom: 36rpx !important;
							}

							.dynamic-state-header {
								margin-bottom: 40rpx;

								.dynamic-time {
									flex: 1;
									font-size: 36rpx;
									font-weight: 900;
									color: #1E1F1F;
									line-height: 44rpx;
								}

								.top {
									width: 40rpx;
									height: 40rpx;
									margin-right: 8rpx;
								}
							}
						}

						.dynamic-state-header {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 30rpx;

							&.dynamic-state-header-y {
								margin-top: 30rpx;
							}

							.dynamic-time {
								font-size: 30rpx;
								font-weight: 400;
								color: #999B9B;
								line-height: 46rpx;
							}

							.dynamic-all {
								font-size: 22rpx;
								font-weight: 400;
								color: #BBBCBB;
								line-height: 44rpx;
								display: flex;
								align-items: center;

								&::after {
									font-family: "dy-iconfont";
									position: relative;
									content: "\e600";
									font-size: 22rpx;
									color: #BBBCBB;
								}
							}
						}

						.dynamic-state-item {
							position: relative;



							.timer-shaft {
								position: absolute;
								left: -10rpx;

								.timer {
									width: 20rpx;
									height: 20rpx;
									background: #A7F517;
									border: 3rpx solid #2B2F2B;
									border-radius: 50%;
								}
							}

							.dynamic-state-content {
								border-left: 2rpx solid #E3E9E5;
								box-sizing: border-box;
								padding-left: 36rpx;
								padding-bottom: 56rpx;

								.data {
									font-size: 48rpx;
									font-weight: 900;
									color: #1E1F1F;
									line-height: 44rpx;
									margin-bottom: 32rpx;
									position: relative;
									top: -14rpx;

									.create-month {
										font-size: 30rpx;
										font-weight: 400;
										color: #999B9B;
										line-height: 46rpx;
										margin-left: 6rpx;
									}
								}

								.content {
									font-size: 30rpx;
									font-weight: 400;
									color: #282D2D;
									line-height: 44rpx;
									word-break: break-all;
									position: relative;
									top: -14rpx;
								}

								.image-list {
									width: 100%;

									// display: flex;
									.dynamic-state-img {
										width: 415rpx;
										border-radius: 40rpx 0 0 40rpx;
										float: left;
										margin-right: 8rpx;
									}

									.dynamic-state-img2 {
										width: calc(100% - 8rpx - 415rpx);
										border-radius: 0 40rpx 0 0;
									}

									.dynamic-state-img3 {
										width: calc(100% - 8rpx - 415rpx);
										border-radius: 0 0 40rpx 0;
									}

									&.image-list-3 {
										// >:nth-child(1) {
										// 	width: 415rpx;
										// 	height: 410rpx;
										// 	border-radius: 40rpx 0 0 40rpx;
										// }
									}
								}

								.operate-fun {
									position: relative;
									// display: flex;
									// align-items: center;
									// justify-content: space-between;
									margin-top: 26rpx;

									.topic {
										max-width: 238rpx;
										height: 45rpx;
										background: #FFF9E8;
										border-radius: 24rpx;
										font-size: 26rpx;
										font-weight: 400;
										color: #FA9B00;
										line-height: 45rpx;
										text-align: center;
										box-sizing: border-box;
										padding: 0 20rpx;
									}

									.operate {
										font-size: 24rpx;
										font-weight: 400;
										color: #282D2D;
										line-height: 33rpx;
										text-align: center;
										display: flex;
										align-items: center;
										justify-content: space-between;

										.share {
											margin: 0;
											padding: 0;
											background: none;
											font-size: 24rpx;
											font-weight: 400;
											color: #282D2D;
											line-height: 38rpx;
											margin-right: 36rpx;
											display: flex;
											align-items: center;

											&::before {
												font-family: "dy-iconfont";
												content: "\e8b0";
												font-size: 38rpx;
												padding-right: 6rpx;
												box-sizing: border-box;
											}
										}

										.appraise-1 {
											display: flex;
											align-items: center;

											&::before {
												font-family: "dy-iconfont";
												content: "\e632";
												font-size: 34rpx;
												padding-right: 8rpx;
												box-sizing: border-box;
											}
										}

										.zan {
											display: flex;
											align-items: center;
											justify-content: center;
											box-sizing: border-box;
											padding-left: 36rpx;

											&::before {
												content: "";
												display: inline-block;
												box-sizing: border-box;
												width: 36rpx;
												height: 36rpx;
												background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/zan/zan.png');
												background-size: 100% 100%;
												margin-right: 8rpx;
												flex-shrink: 0;
											}
										}

										.no-zan {
											display: flex;
											align-items: center;
											justify-content: center;
											box-sizing: border-box;
											padding-left: 36rpx;
											filter: grayscale(100%);
											-webkit-filter: grayscale(100%);

											&::before {
												font-family: "dy-iconfont";
												content: "\e635";
												font-size: 36rpx;
												padding-right: 8rpx;
												box-sizing: border-box;
												flex-shrink: 0;
											}
										}
									}

									.zan-animation {
										position: absolute;
										width: 419rpx;
										height: 360rpx;
										right: -99rpx;
										top: -250rpx;

										&.vanish-animation {
											animation: vanish-animation 0.3s linear;
										}

										.animation-step-1 {
											width: 85rpx;
											height: 85rpx;
											position: absolute;
											top: 50%;
											left: 50%;
											transform: translate(-50%, -25%);
											z-index: 2;
										}

										.animation-step-2 {
											width: 419rpx;
											height: 360rpx;
											position: absolute;
											z-index: 1;
											-webkit-animation: animation-step-2 0.7s linear;
											animation: animation-step-2 0.7s linear;
										}

										.animation-step-3 {
											width: 74rpx;
											height: 32rpx;
											position: absolute;
											top: 50%;
											left: 50%;
											margin-left: calc(-74rpx / 2);
											z-index: 3;
											transform-origin: 0 0;
											-webkit-animation: animation-step-3 0.3s linear;
											animation: animation-step-3 0.3s linear;
										}
									}
								}
							}
						}
					}

					.appraise {
						background: #FFFFFF;
						box-sizing: border-box;
						padding: 38rpx 24rpx 160rpx 24rpx;

						.appraise-header {
							display: flex;
							justify-content: space-between;
							margin-bottom: 37rpx;

							.give-mark {
								font-size: 30rpx;
								font-weight: 900;
								color: #1E1F1F;
								line-height: 56rpx;
								position: relative;

								.grade {
									font-size: 40rpx;
								}

								&::after {
									content: "";
									display: block;
									width: 90rpx;
									height: 14rpx;
									background: linear-gradient(90deg, rgba(211, 251, 51, 0.8) 0%, rgba(167, 245, 23, 0) 100%);
									border-radius: 40rpx;
									position: absolute;
									left: 0;
									bottom: 0;
								}
							}

							.appraise-all {
								font-size: 22rpx;
								font-weight: 400;
								color: #BBBCBB;
								line-height: 44rpx;
								display: flex;
								align-items: center;

								&::after {
									font-family: "dy-iconfont";
									position: relative;
									content: "\e600";
									font-size: 24rpx;
									color: #BBBCBB;
								}
							}
						}

						.post-item {
							box-sizing: border-box;
							padding-bottom: 37rpx;
							margin-top: 23rpx;
							border-bottom: 2rpx solid #E3E9E5;

							&.noBorder {
								border: none;
							}
						}
					}
				}
			}
		}

		.foot-info {
			width: 100%;
			height: calc(116rpx + constant(safe-area-inset-bottom));
			height: calc(116rpx + env(safe-area-inset-bottom));
			box-sizing: border-box;
			padding: 26rpx 36rpx 16rpx 48rpx;
			display: flex;
			// align-items: center;
			justify-content: space-between;
			position: relative;
			box-shadow: 0px 0 19rpx 0px rgba(198, 204, 202, 0.56);
			background: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
			z-index: 11;

			&.foot-info-shelfState {
				justify-content: space-between;
			}

			.payment-information {
				display: flex;
				align-content: center;
				align-items: center;
				flex-direction: column;
				flex-shrink: 0;
				margin: 0;
				padding: 0;
				background-color: rgba(0, 0, 0, 0);
				line-height: normal;

				.dy-iconfont {
					// width: 36px;
					font-size: 35rpx;
					color: #282D2D;
				}

				.discounts {
					margin-top: 8rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #999B9B;
					line-height: 33rpx;
				}
			}

			.look {
				flex-shrink: 0;
				width: 240rpx;
				// height: 102rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				border: 1px solid #7B867F;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 900;
				color: #999B9B;
				// line-height: 102rpx;
				text-align: center;
			}

			.btn-submit {
				flex-shrink: 0;
				width: 372rpx;
				height: 84rpx;
				background: #0E0E0D;
				border-radius: 20rpx;
				line-height: 84rpx;

				&[disabled] {
					color: hsla(0, 0%, 100%, .6);
				}
			}
		}
	}

	.swiper-box-pop {
		width: 100vw;
	}

	.posterContainerShow {
		top: 100rpx !important;

	}

	._felx {
		height: 470rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: 20rpx;
		box-sizing: border-box;

	}

	.max_h {
		height: 1100rpx;
	}

	.min_h {
		height: 900rpx;
	}

	.posterContainer {
		// border: 1px solid red;
		// overflow: hidden;
		transition: top .3s;
		position: fixed;
		z-index: 100000;
		width: 526rpx;
		// height: 1024rpx;
		left: 50%;
		// top: -110vh;
		transform: translate(-50%, 0%);
		color: white;

	}

	.shareContainer {
		padding: 40rpx 40rpx;
		overflow: hidden;

		.iconBox {
			display: flex;
			margin-top: 25rpx;
			padding: 0 60rpx;
			justify-content: space-between;

			.item {
				text-align: center;
				font-size: 22rpx;

				.txt {
					margin-top: 20rpx;
					color: #999B9B;
				}
			}

			.icon {
				width: 100rpx;
				height: 100rpx;

			}
		}

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.txt {
				font-size: 30rpx;
				font-weight: 900;
			}
		}

		.close {
			width: 27rpx;
			height: 22rpx;
		}
	}

	.guidance-pop {
		height: 100vh;
		width: 100vw;
		position: fixed;
		z-index: 10075;
		top: 0;
		left: 0;

		.overlay {
			position: absolute;
			top: 0;
			left: 0;
			height: 100vh;
			width: 100vw;
			background: rgba(0, 0, 0, .7);
			z-index: 998;
		}

		.overlay-none {
			background: rgba(0, 0, 0, 0);
		}

		.guidance-step-2,
		.guidance-step {
			width: 100%;
			position: absolute;
			z-index: 999;

			&::before {
				content: '';
				position: absolute;
				width: 70rpx;
				height: 116rpx;
				border-radius: 20rpx;
				left: 38rpx;
				top: calc(100vh - 120rpx - constant(safe-area-inset-bottom));
				top: calc(100vh - 120rpx - env(safe-area-inset-bottom));
				box-shadow: 0 0 0 999vw rgba(0, 0, 0, .5);
			}

			.remind {
				position: absolute;
				left: 250rpx;
				top: calc(100vh - 120rpx - 10rpx - constant(safe-area-inset-bottom));
				top: calc(100vh - 120rpx - 10rpx - env(safe-area-inset-bottom));
				width: 202rpx;
				height: 118rpx;
				box-sizing: border-box;
				padding: 53rpx 56rpx 28rpx 41rpx;
				background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/order/guidance5.png");
				background-repeat: no-repeat;
				background-size: 100%;
				font-size: 26rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 37rpx;
				text-align: center;
			}

			.Guidance {
				position: absolute;
				left: 20rpx;
				top: calc(100vh - 120rpx - 220rpx - constant(safe-area-inset-bottom));
				top: calc(100vh - 120rpx - 220rpx - env(safe-area-inset-bottom));
				width: 505rpx;
				height: 212rpx;
				box-sizing: border-box;
				padding: 59rpx 33rpx 60rpx 51rpx;
				background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/order/guidance.png");
				background-repeat: no-repeat;
				background-size: 100%;
				font-size: 26rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 37rpx;
				display: flex;
				align-items: center;

				&::after {
					position: absolute;
					display: block;
					right: 43rpx;
					top: -90rpx;
					content: '';
					width: 150rpx;
					height: 150rpx;
					background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/empty/rz.png');
					background-repeat: no-repeat;
					background-size: cover;
					z-index: 10;
				}
			}
		}
	}

	.popup-comment {
		box-sizing: border-box;
		padding: 48rpx 48rpx 132rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0px 0px;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding-bottom: 41rpx;

			.title {
				font-size: 32rpx;
				font-weight: 900;
				color: #282D2D;
				line-height: 45rpx;
			}

			.close {
				font-size: 22rpx
			}
		}
	}

	.foot {
		box-shadow: 0px 0 9rpx 0px rgba(198, 204, 202, 0.56);
		position: absolute;
		background: #FFFFFF;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.foot-box {
			box-sizing: border-box;
			padding: 34rpx 36rpx;
			background: #FFFFFF;

			&.foot-input-pop {
				position: relative;
				transition: bottom 300ms ease-out 0ms, -webkit-transform 300ms ease-out 0ms, transform 300ms ease-out 0ms;
				transform-origin: 50% 50%;
			}

			.foot-input {
				box-sizing: border-box;
				padding: 12rpx 36rpx;
				width: 100%;
				height: 64rpx;
				background: #F6F8F7;
				border-radius: 39rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999B9B;
				line-height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.input-text {
					flex: 1;
				}

				.icon-xingzhuangjiehebeifen {
					color: #282D2D;
					font-size: 40rpx;
					padding-left: 30rpx;
				}
			}
		}
	}

	.delete-pop-menu {
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 0 25rpx 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		position: relative;

		.menu-list {
			padding: 38rpx 0;
			position: relative;
			font-size: 32rpx;
			font-weight: 400;
			color: #282D2D;
			line-height: 45rpx;
			border-bottom: 2rpx solid #E3E9E5;
			// display: flex;
			text-align: center;

			&.delete {
				color: #FF4664;
			}

			&:last-child {
				border: none;
			}

			.dy-iconfont {
				margin-right: 25rpx;
			}
		}
	}

	/deep/.reminder {
		padding-top: 130rpx !important;

		.reminder-image {
			width: 270rpx !important;
		}

		.value {
			margin-bottom: 44rpx !important;
		}
	}



	@-webkit-keyframes animation-step-3 {
		from {
			-webkit-transform: rotateZ(5deg);
		}

		to {
			-webkit-transform: rotateZ(0);
		}
	}

	@keyframes animation-step-3 {
		from {
			transform: rotateZ(5deg);
		}

		to {
			transform: rotateZ(0);
		}
	}

	@keyframes animation-step-2 {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes vanish-animation {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}
</style>